<script setup lang="ts">
import dayjs from 'dayjs'
import zh from 'dayjs/locale/zh-cn'

import avatar from '@/assets/images/user.png'

dayjs.locale('zh-cn', zh)

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const [now, setNow] = useState(dayjs().format('YYYY-MM-DD HH:mm:ss'))
const week = computed(() => {
  return dayjs(unref(now)).format('dddd')
})

let timer: ReturnType<typeof setInterval>

onDeactivated(() => {
  timer && clearInterval(timer)
})
onActivated(() => {
  timer = setInterval(() => {
    setNow(dayjs().format('YYYY-MM-DD HH:mm:ss'))
  }, 1000)
})
onBeforeUnmount(() => {
  timer && clearInterval(timer)
})
onMounted(() => {
  timer = setInterval(() => {
    setNow(dayjs().format('YYYY-MM-DD HH:mm:ss'))
  }, 1000)
})
</script>

<template>
  <div class="width-fill padding-xs alpha-block home-tip border-radius-base flex items-center border rounded">
    <img :src="userInfo.profilePhoto || avatar" alt="" srcset="">
    <div class="margin-left-xs">
      <p class="margin-0 fs-14">
        <span>用户名：</span>{{ userInfo.userName }}
      </p>
      <p class="margin-0 fs-14">
        <span>角色权限：</span>{{ userInfo.roleName }}
      </p>
    </div>
    <div class="margin-left-auto margin-right-xs fs-14 flex flex-col" style="color: var(--el-text-color-regular)">
      <div>{{ now }}</div>
      <p class="margin-0 fs-12">
        {{ week }}
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-tip {
  flex: 0 0 auto;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  p {
    margin-top: 5px;
    color: var(--el-text-color-regular);
    span {
      display: inline-block;
      width: 70px;
      text-align: right;
    }
  }
}
</style>
